<template>

        <el-card shadow="hover">
            <el-table
                    :data="students"
                    style="width: 100%">
                <el-table-column
                        label="学号"
                        align="center"
                        prop="sid"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="姓名"
                        align="center"
                        prop="sname"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="性别"
                        align="center"
                        prop="sex"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="年龄"
                        align="center"
                        prop="age"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="住址"
                        align="center"
                        prop="addr"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="所在班级"
                        align="center"
                        prop="cname"
                        width="180">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    style="text-align: right;margin-top: 10px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </el-card>

</template>

<script>
    export default {
        name: "Student",
        data() {
            return {
                students: [],
                page:1,
                total:10,
                pagesize:5,

            }
            return {
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4
            };
        },
        created() {
            this.findStudents();
        },

        methods: {
            findStudents(){
                this.$axios.get("/student?cmd=list").then(resp=>{
                    this.students = resp.data
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }

        }

    }
</script>

<style scoped>

</style>